/*
 * @Author: C.
 * @Date: 2024-04-15 15:38:50
 */
import { Toast, NavBar, Button } from 'react-vant';
import { VolumeO, NewspaperO } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom';
import { useLocation } from 'react-router-dom';
import { listSentence } from '@/api/sentence';
// import { datas } from './mock/data';
type Sentence = {
  cnContent: string;
  enContent: string;
  id: number;
};
const startBanner = {
  cnContent: '开始!',
  enContent: "let's start !",
  id: 0,
};
export default () => {
  const navigate = useNavigate();
  const { state } = useLocation();
  const [current, setCurrent] = useState(0);
  const [isEmpty, setIsEmpty] = useState(false);
  const [sentenceList, setSentenceList] = useState<Sentence[]>([]);
  const [reads, setReads] = useState<number[]>([]);
  const [sentence, setSentence] = useState(startBanner);
  const [tip, setTip] = useState(false);
  useEffect(() => {
    const target = sentenceList.find(item => item.id == current);
    if (target) {
      setSentence(target);
    }
  }, [current]);
  function goBack() {
    navigate(-1);
  }
  function getNext() {
    setTip(false);
    if (reads.length == 0) {
      setReads(sentenceList.map(item => item.id));
      // console.log('结束');
      setIsEmpty(true);
      return;
    }
    const id = reads[Math.floor(Math.random() * reads.length)];
    setReads(reads.filter(item => item !== id));
    setCurrent(id);
  }
  function say() {
    const ssu = new SpeechSynthesisUtterance();
    ssu.text = sentence.enContent;
    ssu.lang = 'en';
    ssu.rate = 0.8;
    speechSynthesis.speak(ssu);
  }
  async function fetchSentenceList(lessonId: string) {
    const data: Recordable = await listSentence({ pageNum: 1, pageSize: 99, lessonId });
    setSentenceList(data.rows);
    setReads(data.rows.map(item => item.id));
  }
  function reStart() {
    setReads(sentenceList.map(item => item.id));
    setIsEmpty(false);
    setSentence(startBanner);
  }
  useEffect(() => {
    fetchSentenceList(state.lessonId);
  }, [state]);
  return (
    <>
      <NavBar
        title="练习"
        leftText="返回"
        rightText={<NewspaperO fontSize={20} />}
        onClickLeft={() => goBack()}
        onClickRight={() => navigate('/sentenceList')}
      />
      <div className="flex flex-col items-center">
        <div className="p-4 text-2xl pt-10">{sentence.cnContent}</div>
        {tip && <div className="p-4 text-2xl break-all hyphens-auto">{sentence.enContent}</div>}
        <div className="mt-4">
          <Button
            color="linear-gradient(to right, #ff6034, #ee0a24)"
            icon={<VolumeO />}
            round
            onClick={say}
          ></Button>
        </div>
      </div>
      <div className="p-6 fixed bottom-8 w-screen flex flex-col items-center">
        {!isEmpty && (
          <button onClick={() => setTip(true)} className="custom-button">
            提示
          </button>
        )}
        {!isEmpty && (
          <button onClick={getNext} className="custom-button">
            下一个
          </button>
        )}
        {isEmpty && (
          <button onClick={reStart} className="custom-button">
            重新开始
          </button>
        )}
      </div>
    </>
  );
};
